<extend name="common/base" />
<block name="resource">
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/leftCommon.css?v=1.0.1">
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/fans.css"/>

    <script src="__PUBLIC__/Home/ui3/js/web/paging.js" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/scroll.js?v=1.0" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/home/user.js?v=1.0" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/home/recommend.js?v=1.0" type="text/javascript"></script>
    <script src="__PUBLIC__/Home/ui3/js/web/home/fans.js?v=1.0"></script>
</block>

<block name="content">
    <div class="main">
        <div class="container">
            <include file="Ucenter/left" />
            <div class="main-right">
                <div class="fans-title">
                    <span>粉丝</span>
                    <span class="fans-number" data-bind="text:user().fans"></span>
                </div>
                <div class="fans-search">
                    <div class="search-box">
                        <input type="text" class="JS-nickname" placeholder="输入昵称搜索" class="search-content" value="{$nickname}"/>
                        <input type="button" value="搜索" class="search-btn" data-bind="click:search"/>
                    </div>
                </div>
                <!-- ko if:resultTotalCount() == 0 -->
                    <div class="right-content-null">
                        <div class="fans-icon"></div>
                        <div class="fans-tips">哎呀 暂时没有粉丝儿</div>
                    </div>
                <!-- /ko -->
                <!-- ko if:resultTotalCount() > 0 -->
                    <div class="fans-list" data-bind="foreach:fansList">
                        <div class="fans-item">
                            <div class="fans-avatar relative">
                                <a href="" data-bind="attr:{'href':userLink}">
                                    <img src="" alt="" data-bind="attr:{'src':avatar, 'alt':nickname}"/>
                                    <!-- ko if:auth -->
                                    <img src="" title="" data-bind="attr:{'src':auth.pic,'title':auth.name}" class="newG-icon">
                                    <!-- /ko -->
                                </a>
                            </div>
                            <div class="fans-info">
                                <div class="fans-infos">
                                    <div class="fans fans-nickname">
                                        <a href="" data-bind="text:nickname, attr:{'href':userLink}"></a>
                                    </div>
                                    <!-- ko if:gender == '女' -->
                                    <div class="fans female"></div>
                                    <!-- /ko -->
                                    <!-- ko if:gender == '男' -->
                                    <div class="fans male"></div>
                                    <!-- /ko -->
                                    <div class="fans level" data-bind="text:level"></div>
                                </div>
                                <div class="fans-num">
                                    <div class="fans fans-fans">
                                        <span>粉丝</span>
                                        <span class="blue" data-bind="text:fans"></span>
                                    </div>
                                    <div class="fans fans-follow">
                                        <span>关注</span>
                                        <span class="blue" data-bind="text:follows"></span>
                                    </div>
                                    <div class="fans fans-dt">
                                        <span>动态</span>
                                        <span class="blue" data-bind="text:videos"></span>
                                    </div>
                                </div>
                            </div>
                            <!-- ko if: isValidUser -->
                            <div class="fans-btn">
                                <div class="more-btn">
                                    <i></i>
                                    <input type="button" value="更多" class="more myBtn" data-bind="click:more"/>
                                </div>
                                <input type="button" value="" class="addFans myBtn" data-bind="attr:{'value':is_follow()?'已关注':'加关注'}, click:follow"/>
                            </div>
                            <div class="btn-hide">
                                <ul>
                                    <li onclick="warning()"><a href="javascript:;">发私信</a></li>
                                    <li data-bind="click:remove"><a href="javascript:;">移除粉丝</a></li>
                                </ul>
                            </div>
                            <!-- /ko -->
                        </div>
                    </div>
                    <div class="load-more" data-bind="visible:loading">
                        <i><img src="__PUBLIC__/Home/ui3/images/loading-white.gif" alt="正在加载，请稍候..."></i>
                        <span>正在加载，请稍候...</span>
                    </div>
                    <div class="page">
                        <ul data-bind="visible: paging().length > 1, foreach:paging">
                            <li data-bind="css:{'active': is_current, 'next':is_next}, click:click,text:text"></li>
                        </ul>
                    </div>
                <!-- /ko -->
            </div>
        </div>
        <div class="backTop" id="backTop" title="返回顶部">
            <a href="javascript:;"></a>
        </div>
    </div>
</block>

<block name="init">
    <script type="text/javascript">
        window._THIS = {
            videoLink : "/video-",
            matchLink : "/match-detail-",
            userLink : "/user-",
            recommendUrl : "{:U('Visitor/dailyRecommend')}",
            followUrl : {
                dofollow : "{:U('follow/dofollow')}",
                unfollow : "{:U('follow/unfollow')}",
            },
            removeFansUrl : "{:U('follow/removeFans')}",
            _pageUrl : "/my-fans",
            listUrl : "/my-fans?nickname={$nickname}",
            pager : {$pager},
            isFans : true,
        };
        function dataInit() {
            var user = {$user|json_encode};
            viewModel.user(getUser(user));
            viewModel.self({
                'id' : user.id,
                'avatar' : user.avatar ? user.avatar : _COMMON.DEFAULT_AVATAR,
                'nickname' : user.nickname,
            });

            var recommend = {$hotVideo|json_encode};
            viewModel.recommendList(getRecommend(recommend));

            var fansList = {$fansList|json_encode};
            viewModel.fansList(getFans(fansList));
            viewModel.resultTotalCount({$fansCount});
            viewModel.loading(false);
        }
    </script>
</block>